<template>
	<view class="contain">
		<view class="mb-3 hospital blod big" @click="selectHospitals">检查站: {{hospitalname}} <text class="small">选择</text></view>
		<view class="flex justify-between date">
			<view class="flex justify-start left" @click="showTime">
				<view><text>日期:</text></view>
				<view class="ml-1 relative -top-[3rpx]"> 
					<u--input v-model="selectTime" disabled disabledColor="#ffffff" :customStyle="{'width':'180rpx'}" placeholder="选择日期" border="none"></u--input>
				</view>
				<view><text>选择</text></view>
			</view> <!-- left end -->
			<view class="right" @click="reload">
				<view><u-icon name="reload" color="#000" size="28"></u-icon></view>
			</view> <!-- right end -->
		</view>
		
		<!-- 统计信息 -->
		<view class="flex justify-center items-center w-[100%] my-2 tongjititle">
			<view :class="curSelectIndex===0?'selected':''" @click="slecteditem(0)">
				<text>登录访问</text>
				<text>{{userinfoCount}}</text>
			</view>
			<view :class="curSelectIndex===1?'selected':''" @click="slecteditem(1)">
				<text>身份证绑定查询</text>
				<text>{{bindIdCardListCount}}</text>
			</view>
			<view :class="curSelectIndex===2?'selected':''" @click="slecteditem(2)">
				<text>预约体检</text>
				<text>{{yuyueListCount}}</text>
			</view>
		</view>
		
		<!-- 用户登录访问 -->
		<view class="list" v-if="userinfoList.data[0]!=undefined && curSelectIndex===0" v-for="item in userinfoList.data">
			<view style="width:350rpx;"><text>ID{{item.id}}</text></view>
			<view style="width:250rpx;"><text>{{item.utype}}</text></view>
			<view style="width:380rpx;" v-if="item.phone!=''"><text>手机登录</text></view>
			<view style="width:380rpx;" v-else><text>身份证登录</text></view>
			<view style="text-align: right;"><text class="small">{{item.logintime}}</text></view>
		</view>
		<view  v-else class="w-[100%] text-center mt-5"><text v-if="curSelectIndex===0" >暂无数据，请选择日期查看</text></view>
		
		<!-- 绑定查询 -->
		<view class="list" v-if="bindIdCardList.data[0]!=undefined && curSelectIndex===1" v-for="item in bindIdCardList.data" @click="lookPDF(item)">
			<view style="width:380rpx;"><text>ID{{item.id}}</text></view>
			<view style="width:250rpx;"><text>{{item.utype}}</text></view>
			<!-- <text v-if="item.phone!=null && item.phone!=''">{{item.phone}}</text>
			<text v-else>{{item.idcard}}</text> -->
			<view style="width:380rpx;">
				<text>{{item.idCardName}}</text>
				<text>{{item.bindcode}}</text>
			</view>
			<view  style="text-align: right;"><text class="small">{{item.logintime}}</text></view>
		</view>
		<view v-else class="w-[100%] text-center mt-5"><text v-if="curSelectIndex===1" >暂无数据，请选择日期查看</text></view>
		
		
		<!-- 预约体检 -->
		<view class="list" v-if="yuyueList.data[0]!=undefined && curSelectIndex===2" v-for="item in yuyueList.data" style="margin-bottom:20rpx;border-bottom:1px solid #e1e1e1;">
			<view style="width:300rpx;"><text>ID{{item.id}}</text></view>
			<view>
				<text class="small">家长</text>
				<text class="small">{{item.patriarchphone}}</text>
			</view>
			<view class="flex flex-col" style="margin-right:20rpx;">
				<text class="small">学生</text>
				<text class="small">{{item.studentname}}</text>
				<text class="small">{{item.studentidcard}}</text>
			</view>
			<view class="flex flex-col">
				<text class="small" style="text-align: right;">{{item.appointmentthospital}}</text>
				<text class="small" style="text-align: right;">{{item.appointmenttime}}</text>
			</view>
		</view>
		<view v-else class="w-[100%] text-center mt-5"><text v-if="curSelectIndex===2" >暂无数据，请选择日期查看</text></view>
		
		
		
		<!-- 时间组件 -->
		<u-datetime-picker
			:show="show"
			v-model="value1"
			:minDate="(new Date().getTime()-10*24*60*60*1000)"
			mode="date" :closeOnClickOverlay="true" 
			@close="closePicker" 
			@confirm="confirmPicker"
			@cancel="cancelPicker">
		</u-datetime-picker>
		
		
		<!-- 医院选择 -->
		<u-action-sheet 
		@select="selectClick" 
		@close="closeClick" 
		:actions="hospitals.data" 
		:title="title" 
		:show="hshow" 
		:closeOnClickOverlay="true">
		</u-action-sheet>
		
	</view> <!-- contain End -->
	

	
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { onLoad,onShow,onReachBottom} from '@dcloudio/uni-app'
import {Date_D,Date_E} from '@/common/date.js'
import {getHospitalList} from '@/common/common.js'
import { userStore } from '@/stores/userStore'
let { hasLogin,userData } = userStore();


//统计下拉选择
let hospitalname=ref('广东医科大附属医院');
let hshow=ref(false);
let hospitals=reactive({data:[{}]});
const title=ref('选择医院');


let curSelectIndex=ref(0);

let selectTime=ref('');
let show=ref(false);
let value1=ref('');

let tempuserinfoList=reactive({data:[]});

let userinfoList=reactive({data:[]});
let userinfoCount=ref(0);

let bindIdCardList=reactive({data:[]});
let bindIdCardListCount=ref(0);

let yuyueList=reactive({data:[]});
let yuyueListCount=ref(0);


const selectHospitals=()=>{
	hshow.value=true;
}
const closeClick=()=>{
	hshow.value=false;
}

const selectClick=(e:any)=>{
	console.log(e);
	hospitalname.value=e.name;
	getTongJi();
}

const slecteditem=(index:number)=>{
	curSelectIndex.value=index;
	if(index===0){
		getTongJi();
	}
}




/*获取用户列表*/
const getTongJi=()=>{
	if(!/\S/.test(selectTime.value)){
		uni.$tools.Toast("请选择日期");
		return;
	}
	if(!/\S/.test(hospitalname.value)){
		uni.$tools.Toast("请选择医院");
		return;
	}	
	let paraData={
		appointmentthospital:hospitalname.value,
		createtime:selectTime.value,
	}
	console.log("获取挂号参数:",paraData);
	uni.$tools.Reqeust('/api/getTongJi',paraData,'POST').then((res:any)=>{
		console.log(res);
		if(res.data.code===200){
			userinfoList.data=[];
			//uni.hideLoading();
			tempuserinfoList.data=res.data.maps.userinfoList;
			console.log("tempuserinfoList.data",tempuserinfoList.data.length);
			
			addData();
			//console.log("tempuserinfoList.data",tempuserinfoList.data.length);
			bindIdCardList.data=res.data.maps.bindIdCardList;
			yuyueList.data=res.data.maps.yuyueList;
			//console.log("userinfoList.data11111",userinfoList.data,userinfoList.data.length)
			
			//数量统计
			userinfoCount.value=res.data.maps.userinfoListcount;
			bindIdCardListCount.value=res.data.maps.bindIdCardListcount;
			yuyueListCount.value=res.data.maps.yuyueListListcount;
			
		}
	});
}

const addData=()=>{
	uni.showLoading({
		title:"正在加载"
	})
	setTimeout(()=>{
		uni.hideLoading();
	},500);
	let loopnumber=tempuserinfoList.data.length>200?200:tempuserinfoList.data.length;
	for(var i=0;i<loopnumber;i++){
		userinfoList.data.push(tempuserinfoList.data[i]);
	}
	for(var i=0;i<loopnumber;i++){
		tempuserinfoList.data.splice(i,1);
	}
}

onReachBottom(()=>{
	if(curSelectIndex.value===0){
		if(tempuserinfoList.data.length>0){
			addData();
		}else{
			uni.$tools.Toast("已到底");
		}
		console.log("准备到底了",tempuserinfoList.data.length)		
	}
});

onShow(()=>{
	if(userData.saveTime!=''){
		selectTime.value=userData.saveTime;
	}else{
		selectTime.value=Date_D();	
	}
	let temp=getHospitalList(); //获取社区列表
	temp.forEach(item=>{
		let obj={};
		obj.name=item;
		hospitals.data.push(obj);
	});
	getTongJi();
});
const showTime=()=>{
	show.value = true
}
const reload=()=>{
	uni.showLoading({
		title:"正在刷新.."
	})
	setTimeout(()=>{
		uni.hideLoading();
	},1000);
	getTongJi();
}
const closePicker=()=>{
	show.value=false;
}
const confirmPicker=(e:any)=>{
	console.log("确定选择:",e,Date_E(e.value).split(" ")[0]);
	selectTime.value=Date_E(e.value).split(" ")[0];

	//保存选择的时间
	userData.saveTime=selectTime.value;
	
	show.value=false;
	//执行数据查询
	getTongJi();
}
const cancelPicker=()=>{
	closePicker();
}


const lookPDF=(item:any)=>{
	uni.showLoading({
		title:'正在打开报告'
	})
	setTimeout(()=>{
		uni.hideLoading();
	},2000);
	//文档
	uni.downloadFile({
	  url:item.pdflink, //'https://example.com/somefile.pdf'
	  success:res=>{
		  console.log("下载结果:",res);
		var filePath = res.tempFilePath;
		uni.openDocument({
		  filePath: filePath,
		  showMenu: true,
		  success:res=>{
			console.log('打开文档成功',res);
		  },
		  fail:err=>{
			 console.log('打开文档失败',err); 
		  }
		});
	  }
	});	
}
</script>

<style lang='scss' scoped>
	@import "tongji.scss";
</style>